<template>
  <div class="bgcs">
    <div
      class="yaowenall"
      v-for="item in listgroup"
      :key="item.id"
      @click="goarticle(item.id)"
    >
      <div class="ss">
        <div class="centers">
          <div class="title">{{ item.title }}</div>

          <div class="wanbao">
            <span>{{ item.address }}</span
            >&nbsp;&nbsp; &nbsp; &nbsp; <span>{{ item.num }}</span>
          </div>
        </div>
      </div>
      <div class="imgbox">
        <img :src="item.img" alt="" class="show" />
      </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br />
    <!-- 底部tablebar -->
    ------------------------------------------我也是有底线的-------------------------------------------------
  </div>
</template>


<script setup>
import { onMounted, reactive } from "vue";
import { getyao } from "../api/getlogin";
import { useRouter } from "vue-router";
const router = useRouter();

const goarticle = (e) => {
  router.push({
    path: "/article",
    query: { id: e },
  });
};

let listgroup = reactive([]);
onMounted(async () => {
  const { data: res } = await getyao();
  res.forEach((e) => {
    listgroup.push(e);
  });
});
</script>
 


<style>
.title {
  width: 10rem;
  font-size: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-align: left;
}

.yaowenall {
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  border: 1px solid #eff2f5;
  margin-left: 10px;
  margin-right: 10px;
}

.show {
  width: 10rem;
  height: 6rem;
}

.centers {
  display: flex;
  flex-direction: column;
}

.wanbao {
  color: #999;
  font-size: 0.8rem;
  display: flex;
  margin-top: 0.5rem;
  margin-left: -0.48rem;
}

/* .wanbao span {
    margin-left: 0.5rem;
} */

/* .wanbao span:nth-child(2) {
    margin-left: 2rem;
} */

.ss {
  display: flex;
  flex-direction: row;
}
</style>